<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!--&lt;!&ndash; Bootstrap table &ndash;&gt;-->
<!--<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>-->
<!--&lt;!&ndash;bootstrap&ndash;&gt;-->
<!--<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">-->
<!--<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
<!--&lt;!&ndash;bootstrap-table&ndash;&gt;-->
<!--<link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">-->
<!--<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>-->
<!--&lt;!&ndash;bootstrap-table-lanuage&ndash;&gt;-->
<!--<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>-->
<script src="/js/jquery.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!--    <link href="/css/bootstrap-table.min.css" rel="stylesheet">-->
<script src="/js/bootstrap.min.js"></script>
<script src="/dist/bootstrap-table.min.js"></script>
<script>
    $(function () {
        initTable();
    })
    function initTable(){
        var url = "playerunderlist";
        $('#table').bootstrapTable({
            method:'GET',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            // sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url:url,
            pagination:true,
            search:true,
            queryParams : function(params){
                return params
            },
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 2,                       //每页的记录行数（*）
            pageList: [2, 4, 6, 8],        //可供选择的每页的行数（*）
            columns: [
                {
                    checkbox:true,
                },
                {
                    field : 'id',
                    title : 'ID',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'name',
                    title : '姓名',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'age',
                    title : '性别',
                    align : 'center',
                    valign : 'middle'
                }, {
                    field : 'sex',
                    title : '年龄',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'birthday',
                    title : '出生日期',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                },  {
                    field : 'height',
                    title : '身高',
                    align : 'center',
                    valign : 'middle'
                }, {
                    field : 'weight',
                    title : '体重',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'number',
                    title : '证件号码',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                }, {
                    field : 'student',
                    title : '学号',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'hand',
                    title : '左右手',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                }, {
                    field : 'location',
                    title : '场上位置',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    // field : 'dept.id',
                    title : '注册单位',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                    formatter : function (value, row, index){
                        // new Date(value).format('yyyy-MM-dd hh:mm:ss');
                        var html = row.dept.name;
                        return html;
                    },
                }, {
                    // field : 'year1',
                    title : '协议年限',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                    formatter : function (value, row, index){
                        // new Date(value).format('yyyy-MM-dd hh:mm:ss');
                        var html = row.year1 +'--'+ row.year2;
                        return html;
                    },

                }, {
                    // field : 'frout',
                    title : '证件正反面',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                    formatter : function (value, row, index){
                        var html = '<img src='+row.frout+' alt="图片"  height="50px" width="50px">' + '|' + '<img src='+row.side+' alt="图片"  height="50px" width="50px">';
                        return html;
                    },
                }, {
                    field : 'book',
                    title : '户口本',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                    formatter : function (value, row, index){
                        var html = '<img src='+value+' alt="图片"  height="50px" width="50px">';
                        return html;
                    },
                },{
                    title : '操作',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                    formatter : function (value, row, index){
                        // new Date(value).format('yyyy-MM-dd hh:mm:ss');
                        var html = ' <a href="" onclick="roll('+row.id+')" style="color: #0044cc">转出</a>';
                        return html;
                        return value;
                    }
                }]
        });
    }
    //导出
    function  playerExcel(){
        //这里获得一些要前台查询的数据
        // 这里不能用ajax的方式，用ajax方式请求，会直接输出流
        location.href= "/playerExcel";

    }
</script>
<body>
<div class="container">
    <div>
        <button type="button" style="float: right" onclick="playerExcel()" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >导出</button >
        <hr size="5px" />
        <table id="table"></table>
    </div>
</div>
</body>
</html>